<template>
      <div class="list" ref="wrapper">
          <div>
            <div class="area">
                <div class="title  border-topbottom">热门城市</div>
                <div class="buttom-list">
                    <div class="buttom-wrapper" v-for="item of hotCities" :key="item.id">
                        <div class="buttom" @click="change(item.name)">{{item.name}}</div>
                    </div>
                </div>
            </div>
            <div class="area">
                <div class="title border-topbottom">当前城市</div>
                <div class="buttom-list">
                    <div class="buttom-wrapper">
                        <div class="buttom">{{this.$store.state.city}}</div>
                    </div>
                </div>
            </div>
            <div class="area" v-for="(items,key) of cities" :key="key" :ref="key">
                <div class="title  border-topbottom">{{key}}</div>
                <div class="item-list" v-for="item of items" :key="item.id">
                    <div class="item" @click="change(item.name)">{{item.name}}</div>
                </div>
            </div>
        </div>
      </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
    name:'CityList',
    props:{
      cities:Object,
      hotCities:Array,
      letter: String
    },
    methods: {
      change (city) {
        this.$store.dispatch('change',city)
        this.$router.push('/')
      }
    },
    mounted () {
        this.scroll = new Bscroll(this.$refs.wrapper)
    },
    watch:{
      letter(){
        if(this.letter){
          const element = this.$refs[this.letter][0]
          this.scroll.scrollToElement(element)
        }
      }
    }
}
</script>

<style lang='stylus' scoped>
  @import '~styles/vribles.styl'
   .list
     overflow: hidden 
     position: absolute
     top:1.76rem
     left: 0
     right: 0
     bottom: 0 
    .border-topbottom
     border-bottom: solid .001rem #777
     border-top: solid .001rem #777
    .title
        padding-left: .2rem
        line-height: .6rem
        background: #eee
    .buttom-list
      overflow hidden
      padding: .1rem
      .buttom-wrapper
        float: left
        width: 33.33%
        .buttom
          padding: .1rem 0
          margin: .1rem
          border: .02rem solid #ccc
          text-align: center
          border-radius:.06rem
    .item-list
      .item
        line-height: .76rem
        color: #666
        padding-left: .2rem
        border-bottom: solid .001rem #777
</style>
